<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;

        }
        #app{

            margin: 10vw auto;
            background-color: #afe5d9;
            width: 300px;
            height: 200px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        #xx{
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
    </style>
</head>
<body>
    <div id="app">
        <div >
            <input type="text" v-model="no1" size="8"><span>NO1</span>
            <br>  <br>
               <div id="xx">
                   <input type="radio" name="ysf" value="1" id="1" v-model="obj">+
                   <input type="radio" name="ysf" value="2" id="2" v-model="obj">-
                   <input type="radio" name="ysf" value="3" id="3" v-model="obj">×
                   <input type="radio" name="ysf" value="4" id="4" v-model="obj">÷
               </div>

            <br>  <br>

            <input type="text" v-model="no2" size="8"><span>NO2</span>
            <br>  <br>

            <h3><button @click="count1">计算</button>={{result}}</h3>

        </div>
    </div>
    <script>



        let app = new Vue({
            el:'#app',
            data:{
                sp:document.getElementById("s1"),
                no1:0,
                no2:0,
                result:0,
                obj:''
            },
            methods:{
                count1:function () {
                    switch(this.obj){
                        case '1':
                            this.result = parseInt(this.no1) + parseInt(this.no2)
                            break;
                        case '2':
                            this.result = parseInt(this.no1) - parseInt(this.no2)
                            break;
                        case '3':
                            this.result = parseInt(this.no1) * parseInt(this.no2)
                            break;
                        case '4':
                            this.result = parseInt(this.no1) / parseInt(this.no2)
                            break;
                    }
                }


            }

        })
    </script>
</body>


</html>